<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>玉灵 QQ:7031633 Email:webrx@126.com</title>
    <style>
        *, html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin: 16px;
            width: 300px;
            padding: 18px;
            height: 200px;
            border-radius: 15px;
            /*background-color: #f00;*/
            border: 1px dashed gray;
        }

        input[name] {
            border: none;
            /*取消表单浏览器默认的焦点框*/
            outline: none;
            padding: 5px;
            border-bottom: 1px dashed gray;
        }

        .arr {
            /*margin: 0 5px;*/
            font-size: 0;
            line-height: 0;
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-left: 15px solid red;
            border-top: 15px solid green;
            border-right: 15px solid blue;
            border-bottom: 15px solid orange;

        }

        .cc {
            box-shadow: 0 0 5px #000;
            margin: 15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            animation: aa 1s linear 0s alternate infinite;
            opacity: .6;
        }

        @keyframes aa {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg) scale(1.8, 1.8);
            }
        }

    </style>
</head>

<body>

<div class="menu"></div>

<div class="box">www</div>

<br>
<label>用户名：<input autofocus id="username" name="username" type="text"></label>

<br>
<div class="cc">
    <div class="arr"></div>
</div>
</body>
</html>
